<!--
 * @Author: 王耀泽
 * @Date: 2025-07-29 10:07:27
 * @LastEditTime: 2025-07-29 13:50:47
 * @LastEditors: aigis
 * @Description: 15201563666
 * @FilePath: \vue3-cesium\src\views\CesiumView.vue
 * 先看《地理信息导论第七版》
-->
<template>
  <div>
    <div class="header-component">
      <Headers />
    </div>
    <div id="cesiumContainer"></div>

    <div v-show="bgShow" class="cesium-bg"></div>
 
    <div class="content-component">
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component" :key="$route.name" v-if="$route.meta.keepAlive" />
        </keep-alive>
        <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" />
      </router-view>

    </div>
  </div>
</template>

<script setup>
import * as Cesium from 'cesium'
import { onMounted, ref, watch, onUnmounted, computed } from 'vue'
import { useRoute } from 'vue-router'
import CesiumInitializer from '@/utils/cesiumcon/cesiumInitializer'
import Headers from './header/Header.vue'

// 定义需要缓存的视图列表
const cachedViews = computed(() => {
  // 只有在 /jsc 路径下才启用 keep-alive
  if (route.path === '/jsc') {
    return ['jsc', 'sjgl'] // 这里替换为实际的组件名称
  }
  return [] // 其他路径不缓存任何组件
})


onMounted(async () => {
  // 初始化Cesium地图，使用默认配置（北京为初始位置）
  const viewer = CesiumInitializer.init('cesiumContainer')
  // console.log('Cesium viewer initialized:', viewer)

  window.viewer = await viewer

  window.Cesium = Cesium
  
  
  
  const event = new CustomEvent("cesiumInit", { detail: { viewer: viewer, Cesium: Cesium } });
  
  window.dispatchEvent(event);
})
const route = useRoute();
const bgShow = ref(true);
watch(
  () => route.path,
  (newPath, oldPath) => {
    // 路由路径变化时执行
    console.log(`路由从 ${oldPath} 变为 ${newPath}`)
    // 清除所有实体
    if (window.viewer) {
      window.viewer.entities.removeAll();
    }
    // 根据需求修改变量，比如切换 true/false
    if (newPath == '/jsc' || newPath == '/jyjc' || newPath == '/mnxl' || newPath == '/tyfp') {
      bgShow.value = true;
    } else {
      bgShow.value = false;
    }
  },
  { immediate: true }
)

onUnmounted(() => {
  // window.removeEventListener('cesiumInit');
  window.viewer = null
  window.Cesium = null
})
</script>


<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.header-component {
  width: 100%;
  height: 100px;
  z-index: 1000;
  background-size: 100% 100%;
  position: absolute;
}

.content-component {
  padding-top: 100px;
  height: 100vh;
}

.cesium-bg {
  width: 100%;
  height: 100vh;
  background: linear-gradient(to right,
      #141A28 0%,
      rgba(20, 26, 40, 0.8) 10%,
      transparent 30%,
      transparent 70%,
      rgba(20, 26, 40, 0.8) 90%,
      #141A28 100%);
  /* 渐变背景 */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  /* 在cesium之上，但在content之下 */
  pointer-events: none;
  /* 允许点击穿透 */
  user-select: none;
}
</style>

<style>
.cesium-viewer-animationContainer {
  display: none;
  /* 隐藏动画控件 */
}

.cesium-viewer-timelineContainer {
  display: none;
}
</style>